<template>
    <div class="msginfobox">
        <div class="msgbox">
            <div class="tx">
                <div>头像：</div>
                <img class="tximg" :src="tx" alt="" @click="chooseimg">
            </div>
            <div class="mc">名称：</div>
            <div class="mcformbox">
                <input class="ipt" @input="changename" v-model="name" type="text" placeholder="请输入名称">
            </div>
            <div class="mc">性别：</div>
            <div class="mcformbox">
                <picker class="ipt" @change="changesex" :value="sex" :range="sexarray">
                    <view class="uni-input">{{ sexarray[sex] }}</view>
                </picker>
            </div>
            <div class="mc">实名认证：</div>
            <div class="mcformbox">
                <div v-if="isMemoSame === false" class="ipt blue" @click="torz">去认证</div>
                <div v-if="isMemoSame === true" class="ipt" @click="serz">已认证</div>
            </div>
            <div class="mc light">绑定手机号：</div>
            <div class="mcformbox lightbox">
                <div>{{ phone }}</div>
            </div>
            <div class="mc light">所属分组：</div>
            <div class="mcformbox lightbox">
                <div>{{ dept }}</div>
            </div>
            <div class="mc light">入职时间：</div>
            <div class="mcformbox lightbox">
                <div>{{ createtime.slice(0, 10) }}</div>
            </div>
        </div>
        <!-- <div class="btnbox">
            <div class="btn qx" @click="back">
                取消
            </div>
            <div class="btn qd" @click="changepersonmsg">
                确定
            </div>
        </div> -->
    </div>
    <popup title="实名认证" cancel @cancel="onCancel" v-if="isPopup">
        <div class="sm_name">
            <div class="lable">姓名</div>
            <div class="lablecontent">
                <input type="text" v-model="smname" placeholder="请输入">
            </div>
        </div>
        <div class="sm_id">
            <div class="lable">身份证号码</div>
            <div class="lablecontent">
                <input type="text" v-model="smid" placeholder="请输入">
            </div>
        </div>
        <div class="jg">
            <div class="jgbox"><img class="img" src="../../static/Vector.png" alt=""><span>请输入正确格式的身份证号</span></div>
        </div>
        <div class="mybtnbox">
            <div class="btn" @click="smsubmit">提交</div>
        </div>
    </popup>
    <popup cancel @cancel="onCancel1" v-if="isPopupok">
        <div class="tcimg">
            <img class="img"
                src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/crm/071a3723-f9d8-496b-90b5-762eb8ff9c4f.png"
                alt="">
        </div>
        <div style="text-align: center;">
            <div>{{ smname }}</div>
            <div>{{ smid }}</div>
        </div>
    </popup>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import * as global from '../../utils/global'
import { onLoad } from '@dcloudio/uni-app'
import { getuserinfo, uploadheaderimgapi, changepersonmsgapi, checkrealname } from '../../api/personalmsgapi'
import { shake } from "@/utils/util"

const router = useRouter()
const route = useRoute()
const changename = (val: any) => {
    console.log(val)
    if (val.detail.value === '') {

    } else {
        shake(changepersonmsg, 600)
    }
}
const isPopupok = ref(false)
const smname = ref('')
const smid = ref('')
const onCancel = () => {
    isPopup.value = false
}
const onCancel1 = () => {
    isPopupok.value = false
}
const smsubmit = () => {
    if (smname.value === '') {
        uni.showToast({
            title: '请输入姓名',
            icon: 'none'
        })
        return
    }
    if (smid.value === '') {
        uni.showToast({
            title: '请输入身份证',
            icon: 'none'
        })
        return
    }
    if (!/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/.test(smid.value)) {
        uni.showToast({
            title: '请输入正确的身份证',
            icon: 'none'
        })
        return
    }
    changepersonmsgapi(
        {
            id: id.value,
            salesHeadUrl: tx.value,
            salesName: name.value,
            sex: sex.value,
            realName: smname.value,
            idCardNo: smid.value
        }
    ).then((res: any) => {
        console.log(res)
        if (res) {
            uni.showToast({
                title: '修改成功',
                icon: 'none'
            })
            checkrealname({
                realName: smname.value,
                idCardNo: smid.value
            }).then((res: any) => {
                console.log(res, 'fayufuyisgyhs')
                isPopupok.value = true
                isPopup.value = false
                getuserinfofn()
            })
        }
    })
}
const torz = () => {
    // isPopup.value = true
    uni.navigateTo({
        url: '/pages/realNameAuthentication/realNameAuthentication?hassm=' + '0'
    })
}
const serz = () => {
    // isPopupok.value = true
    uni.navigateTo({
        url: "/pages/hascheckid/hascheckid"
    })
}
const isPopup = ref(false)
const getuserinfofn = () => {
    getuserinfo().then((res: any) => {
        console.log(res, '个人信息')
        tx.value = res.salesHeadUrl
        sex.value = (res.sex) * 1
        name.value = res.salesName
        phone.value = res.phone
        dept.value = res.deptName
        createtime.value = res.createTime
        id.value = res.id
        smid.value = res.idCardNo
        smname.value = res.realName
        if (smid.value === '' || smid.value === null) {
            isMemoSame.value = false
        } else {
            isMemoSame.value = true
        }
    })
}
const isMemoSame = ref(false)
const chooseimg = () => {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 从相册选择
        success: function (res: any) {
            console.log(res)
            uni.uploadFile({
                url: global.default.baseUrl + '/api/v1/crm/sign-contract-record/upload',
                filePath: res.tempFilePaths[0],
                name: 'file',
                formData: {
                    user: 'test'
                },
                success: (uploadFileRes) => {
                    console.log(JSON.parse(uploadFileRes.data).data.fileUrl)
                    tx.value = JSON.parse(uploadFileRes.data).data.fileUrl
                    changepersonmsg()
                }
            })
        }
    })
}
const changepersonmsg = () => {
    changepersonmsgapi(
        {
            id: id.value,
            salesHeadUrl: tx.value,
            salesName: name.value,
            sex: sex.value,
            realName: smname.value,
            idCardNo: smid.value
        }
    ).then((res: any) => {
        console.log(res)
        if (res) {
            uni.showToast({
                title: '修改成功',
                icon: 'none'
            })
        }
    })
}
const back = () => {
    uni.navigateBack(1)
}
const id = ref<any>(null)
const sexarray = ref(['男', '女', '未知'])
const tx = ref('')
const sex = ref(1)
const name = ref('')
const phone = ref('')
const dept = ref('')
const createtime = ref('')
const changesex = (val: any) => {
    console.log(val.detail.value)
    sex.value = val.detail.value * 1
    changepersonmsg()
}
onMounted(() => {
    getuserinfofn()
})
</script>

<style lang="scss" scoped>
.light {
    color: #9497B1;
}

.lightbox {
    margin-top: 10rpx;
    color: #9497B1;
    padding-bottom: 10rpx;
}

.mc {
    margin-top: 32rpx;
}

.mcformbox {
    overflow: hidden;
    margin-top: 10rpx;
    border-bottom: 1px solid #F4F4F7;

    .ipt {
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }
}

.msginfobox {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    height: 100vh;
    background-color: #fafafc;

    .msgbox {
        background-color: #ffffff;
        border-radius: 16rpx;
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx 24rpx;

        .tx {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .tximg {
                width: 94rpx;
                height: 94rpx;
                border-radius: 50%;
            }
        }
    }

    .btnbox {
        width: 100%;
        box-sizing: border-box;
        margin-top: 58rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
            width: 293rpx;
            height: 88rpx;
            border-radius: 44rpx;
            font-size: 32rpx;
            text-align: center;
            line-height: 88rpx;
        }

        .qx {
            color: #202536;
            border: 1px solid #DEE0E3;
        }

        .qd {
            color: #ffffff;
            background-color: #3E5FF5;
        }
    }
}

.jg {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 27rpx;

    .jgbox {
        width: 100%;
        border-top: 1px solid #FF7642;
        color: #FF7642;
        font-size: 24rpx;
        padding-top: 27rpx;
        display: flex;
        align-items: center;
    }

    .img {
        width: 24rpx;
        height: 24rpx;
    }
}

.sm_name,
.sm_id {
    padding: 27rpx 32rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-top: 1px solid #EAEAEF;

    .lable {
        width: 170rpx;
        margin-right: 6rpx;
        color: #171A1D;
        font-size: 34rpx;
    }
}

.mybtnbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 27rox 32rpx;

    .btn {
        width: 270rpx;
        height: 88rpx;
        line-height: 88rpx;
        background-color: #3E5FF5;
        text-align: center;
        border-radius: 16rpx;
        color: #ffffff;
        font-size: 32rpx;
    }
}

.tcimg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .img {
        width: 490rpx;
        height: 490rpx;
    }
}

.blue {
    color: #3E5FF5;
}
</style>
